<template>
	<view class="adrress_manage_layoout">
		<view class="header_search">
			<image class="search_img" src="../../static/imgs/logo.jpg" mode=""></image>
			<uni-search-bar clearButton="auto" placeholder="搜索地址/姓名/电话" cancelButton="none" @confirm="search"
				@input="input" :radius="100"></uni-search-bar>
		</view>

		<view class="data_content">
			<scroll-view scroll-y="true" class="data_layout">
				<uv-empty v-if="addressList.length<1" mode="search" class="empty_layout" textSize="24" iconSize="120">
				</uv-empty>
				<scroll-view scroll-y="true" v-else>
					<view>111</view>
				</scroll-view>
			</scroll-view>


		</view>
<!-- 添加地址按钮 -->
		<view class="addAddressLayout">
			<uv-button @click="openPop" iconColor="#FFF" style="height: 200rpx;" text="添加地址" icon="plus" size="large"
				color="#FAC526"></uv-button>
		</view>

<!-- 添加地址弹出框 -->
		<uv-action-sheet ref="actionSheet" :actions="list" title="添加地址" @select="select" @close="close" round="20">
			<uv-form :model="addressForm" labelPosition="left" labelAlign="left" labelWidth="120rpx"
				:borderBottom="true">
				<uv-form-item label="收货人" prop="addressForm.name">
					<uv-input type="text" placeholder="请输入姓名" v-model="addressForm.name" @change="change"></uv-input>
				</uv-form-item>
				<uv-form-item label="联系电话" prop="addressForm.phoneNumber">
					<uv-input type="number" placeholder="请输入电话" v-model="addressForm.phoneNumber" @change="change"></uv-input>
				</uv-form-item>
				<uv-form-item label="省市区" prop="addressForm.country" >
					<uv-input type="text" placeholder="请选择省市区" v-model="addressForm.country" @click="openPicker"></uv-input>
					<uv-picker :defaultIndex="defaultValue" ref="picker" :columns="addressList" :loading="loading"
						keyName="name" @change="change" @confirm="confirm">
					</uv-picker>
				</uv-form-item>
				<uv-form-item label="详细地址" prop="addressForm.address">
					<uv-input type="text" placeholder="请输入详细地址" v-model="addressForm.address" @change="change"></uv-input>
					<uv-icon name="map" color="#2979ff" size="32" @click="getLocation"></uv-icon>
				</uv-form-item>
				<uv-button color="rgb(7, 193, 96)" text="提交" customStyle="margin-top: 10px" @click="submit"></uv-button>
				<uv-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></uv-button>
			</uv-form>
		</uv-action-sheet>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from 'vue';
	
	const actionSheet = ref(null)
	const picker = ref(null)
// 弹出pop框
	const openPop = () => {
		actionSheet.value.open()
		getPrinceData()
	}
//关闭pop框
const closePop = () => {
		actionSheet.value.close()
	}
	
//打开省市区选择器
	const openPicker = () => {
		picker.value.open()
	}

//地址表单对象
	const addressForm = ref({
		name: '',
		phoneNumber: null,
		country: '',
		address: ''
	})
//省市区数据对象
	const countryColums = ref({
		provinces: [],
		citys: [], //市
		areas: [], //区
	})

//计算地址列表
	const addressList = computed(() => {
		return [countryColums.value.provinces, countryColums.value.citys, countryColums.value.areas]
	})
//选择器的默认数据
	const defaultValue = ref([3442, 1, 2])
//选择器选择的数据
	const pickerValue = ref([])

//获取地区数据方法
	const getPrinceData = () => {
		uni.request({
			url: 'static/data/regions.json',
			method: 'GET',
			success: (res) => {
				const {
					statusCode,
					data
				} = res
				if (statusCode === 200) {
					countryColums.value.provinces =
						data.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1));
					//初始化省市区
					initListValue()
				}
			},
			fail: (err) => {
				console.error(err)
			}
		})
	}
	
// 初始化地区数据
	const initListValue = () => {
		// 设置省
		pickerValue.value[0] = countryColums.value.provinces.findIndex(item => Number(item.id) === defaultValue.value[
			0]);
		// 设置市
		countryColums.value.citys = countryColums.value.provinces[pickerValue.value[0]].children || []
		pickerValue.value[1] = countryColums.value.citys.findIndex(item => Number(item.id) === defaultValue.value[1])
		// 设置区
		countryColums.value.areas = countryColums.value.citys[pickerValue.value[1]].children || []
		pickerValue.value[2] = countryColums.value.areas.findIndex(item => Number(item.id) === defaultValue.value[2])
		// 重置下位置
		picker.value.setIndexs(
			[pickerValue.value[0],
				pickerValue.value[1], pickerValue.value[2]
			],
			true
		);
	}
	
// 选择省市区
	const change = (e) => {
		//columnIndex：第几列， index:第几个,indexs:对应各列的索引值
		const {
			columnIndex,
			index,
			indexs
		} = e

		// 改变了省
		if (columnIndex === 0) {
			countryColums.value.citys = countryColums.value.provinces[index]?.children || []
			countryColums.value.areas = countryColums.value.citys[0].children || []
			picker.value.setIndexs([index, 0, 0], true)
			//改变了市
		} else if (columnIndex === 1) {
			console.log(e);
			countryColums.value.areas = countryColums.value.citys[index].children || []
			picker.value.setIndexs(indexs, true)
		}
		console.log(e)
	}
// 确认选择省市区
	const confirm = (e) => {
		console.log('确认选择的地区：', e);
		addressForm.value.country = e.value.map(item=>item.name).join("")
		console.log(addressForm.value.country);
		uni.showToast({
			icon: 'none',
			title: `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
		})
	}
	
	//获取位置
	const getLocation = ()=>{
		console.log(1111);
		uni.chooseLocation({
			success: function (res) {
				addressForm.value.address = res.address+res.name
				console.log('位置名称：' + res.name);
				console.log('详细地址：' + res.address);
				console.log('纬度：' + res.latitude);
				console.log('经度：' + res.longitude);
			}
		});
	}
	
	//收货地址列表:实际应该使用接口
	const myAddressList = ref([])
	
	const submit = ()=>{
		//调用接口
		myAddressList.value.push(addressForm.value)
		//关闭pop框， 并重置form数据
		closePop()
		
		console.log(myAddressList.value);
	}
	
</script>

<style lang="scss" scoped>
	.adrress_manage_layoout {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 20rpx;
		display: flex;
		flex-direction: column;

		.header_search {
			width: 85%;
			display: flex;
			align-items: center;

			.search_img {
				width: 70rpx;
				height: 70rpx;
			}

			:deep(.uni-searchbar) {
				height: 70rpx;
				width: 450rpx;
			}
		}

		.data_content {
			display: flex;
			flex: 1;
			position: relative;

			.empty_layout {
				position: absolute;
				left: calc(50% - 200rpx);
				top: calc(50% - 270rpx);
				width: 400rpx;
				height: 400rpx;

			}
		}

		.addAddressLayout {
			height: 200rpx;
		}
		:deep(.uv-action-sheet){
			padding: 0 20rpx;
			:deep(.uv-action-sheet__header){
				font-size: 43rpx;
			}
		}
	}
</style>